<template>
  <button 
    class="theme-switch" 
    @click="toggleDark()"
    :title="isDark ? t('common.theme.light') : t('common.theme.dark')"
  >
    <div class="icon">
      {{ isDark ? '🌞' : '🌙' }}
    </div>
  </button>
</template>

<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<style scoped>
.theme-switch {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.theme-switch:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.icon {
  font-size: 20px;
}

:global(.dark) .theme-switch:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style> 